<template>
  <PCard :isCardBorder="true" :shadow="'always'" :isHeadBottomBorder="true" :bodyStyle="{ width: '100%' }">
    <!-- <div slot="header" class="card-title-detail2">
      <span>企业信息</span>
      <a-button @click="mailingInformation" type="link" style="float: right;"  >邮寄资料 </a-button>
    </div> -->
    <PageForm ref="MailingInformation" :formKey="formKey_qyxx"
      :formEvent="(...args) => { formEvent('MailingInformation', ...args) }" :formConfig="pageFormDefaultConfig"
      :itemList="formList"></PageForm>
    <PageForm v-if="dataConfig.isRequirePayment" ref="MailingInformation1" :formKey="formKey_qyxx1"
      :formEvent="(...args) => { formEvent('MailingInformation1', ...args) }" :formConfig="pageFormDefaultConfig"
      :itemList="formList1"></PageForm>
    <Tips :tips="'若您有正在办理中的业务，寄送营业执照，将导致业务办理暂停！请谨慎选择！<br/>若您选择快递寄送，请完善您的收件信息'"></Tips>
    <div class="btn-group">
      <a-button type="primary" block @click="btnEvent">提交申请 </a-button>
    </div>


    <!-- 当前页面公共弹框 -->
    <a-modal v-model="winConfig.visible" :title="winConfig.title" :footer="null" :width="700" :maskClosable="false"
      :destroyOnClose="true">
      <!-- <component :is="componentList" :formInfo="formInfo"></component> -->
      <a-result :status="winConfig.status" :title="''" :sub-title="winConfig.subTitle">
        <template #extra>
          <a-button @click="qrjsEvent(winConfig.btnLabel)" key="console" type="primary" class="ant-btn-gree" block
            :disabled="winConfig.btnVisible && winConfig.type === '1'">
            {{ winConfig.btnLabel }}<span
              v-if="winConfig.btnVisible && winConfig.type === '1'">（请阅读{{ winConfig.timerNum }}秒）</span>
          </a-button>
          <div v-if="winConfig.type === '2'" style="color: #999999; margin-top: 20px;">{{ winConfig.timerNum }} 秒后自动关闭</div>
        </template>
      </a-result>
    </a-modal>

  </PCard>
</template>

<script>
import getDataForDB from '@/api/qsbBusinessManagement'
import Tips from './tips.vue'
import UUID from '@/utils/uuid'
const formKey_qyxx = UUID()
const formKey_qyxx1 = UUID()
const pageFormConfig_ = {
  columnCount: 3,
  layout: 'vertical',
  labelCol: { span: 4 },
  wrapperCol: { span: 20 },
}
const formItemConfig = {
  labelAlign: 'left',
  labelCol: { xxl: 6, xl: 5 },
  wrapperCol: { xxl: 18, xl: 19 },
}

const zlData = [
  // {enName:'key1',cnName:'营业执照'},
  // {enName:'key2',cnName:'金税盘'},
  // {enName:'key3',cnName:'公章(光敏章，无备案证)'},
  // {enName:'key4',cnName:'公章(牛角章，有备案，460元/套)'},
  '营业执照（正副本）', '公司业务公章（公章、财务章等）', '银行相关资料'
]

const lqfsData = [
  { enName: '0', cnName: '快递寄送' },
  { enName: '1', cnName: '线下领取' },
]

/**
 * 手机号校验
 * @param {*} pageSelf
 * @param {*} rule
 * @param {*} value
 * @param {*} callback
 */
const handlePhoneCheck = async (rule, value, callback) => {
  let reg = /^(1\d{10})$/;
  if (!reg.test(value)) {
    callback(new Error("请输入正确手机号"))
  } else {
    // const result = await getDataForDB('校验法人手机号是否注册', { legalPhone: value })
    // if (result.result === 1) {
    //     callback(new Error("当前手机号已注册"))
    // } else {
    callback()
    // }
  }
}

export default {
  name: 'MailingInformation',
  components: { Tips },
  props: {
    formInfo: {},
    // 关闭时间
    coloseEvent: { type: Function },
  },
  data() {
    return {
      formKey_qyxx,
      formKey_qyxx1,
      pageFormDefaultConfig: pageFormConfig_,
      formList: [
        { enName: 'entName', cnName: '需求企业名称', type: 'label', value: '', monoRow: true, formItemAttr: { ...formItemConfig } },
        { enName: 'dataList', cnName: '选择要领取的材料', type: 'checkboxGroup', isRequire: true, value: [], isChangeEvent: true, optionList: zlData, monoRow: true, formItemAttr: { ...formItemConfig } },
        { enName: 'onLine', cnName: '选择要领取的方式', type: 'radioGroup', isRequire: true, value: '0', isChangeEvent: true, optionList: lqfsData, monoRow: true, formItemAttr: { ...formItemConfig } },
        // { enName: 'entId3', cnName: '收件人', type: 'input', value: '', isRequire:true, monoRow:true, formItemAttr: { ...formItemConfig } },
        // { enName: 'entId4', cnName: '手机号', type: 'input', value: '',isRequire:[{ required: true,message: '请输入手机号!' },{ validator: (rule, value, callback)=>{handlePhoneCheck(rule, value, callback)} }], monoRow:true, formItemAttr: { ...formItemConfig } },
        // { enName: 'entId5', cnName: '地址', type: 'input', value: '', isRequire:true, monoRow:true, formItemAttr: { ...formItemConfig } },
      ],
      formList1: [
        // { enName: 'entName', cnName: '需求企业名称', type: 'label', value: '',monoRow:true, formItemAttr: { ...formItemConfig } },
        // { enName: 'entId1', cnName: '选择要领取的材料', type: 'checkboxGroup',isRequire:true, value: ['营业执照(正副本)'], optionList:zlData, monoRow:true, formItemAttr: { ...formItemConfig } },
        // { enName: 'entId2', cnName: '选择要领取的方式', type: 'radioGroup',isRequire:true, value: 'key1', optionList:lqfsData, monoRow:true, formItemAttr: { ...formItemConfig } },
        { enName: 'consignee', cnName: '收件人', type: 'input', value: '', isRequire: true, monoRow: true, formItemAttr: { ...formItemConfig } },
        { enName: 'phone', cnName: '手机号', type: 'input', value: '', isRequire: [{ required: true, message: '请输入手机号!' }, { validator: (rule, value, callback) => { handlePhoneCheck(rule, value, callback) } }], monoRow: true, formItemAttr: { ...formItemConfig } },
        { enName: 'address', cnName: '地址', type: 'input', value: '', isRequire: true, monoRow: true, formItemAttr: { ...formItemConfig } },
      ],
      dataConfig: {
        isRequirePayment: true,
        formRes: {},
      },
      winConfig: {
        type: '1',
        visible: false,
        status: 'warning', //warning success info
        title: '材料寄送',
        subTitle: '确认邮寄地址为您经常居所地且真实有效；邮寄相关信息为您个人真实信息且具有查询性；邮件资料寄出后中雄信息科技有限公司不以任何原因对该资料主张相应权利以及承担保管义务，请您妥善保管。',
        timerNum: 10,
        btnLabel: '我已知晓，确认寄送',
        intervalObj: null,
        btnVisible: true,
      },

    }
  },
  watch: {
    formInfo: {
      handler(val) {
        if (Object.prototype.toString.call(val) === '[object Object]') {
          this.formList[0].value = val['entName']
        }
        // console.log('formConfig watch ==>',val);
      },
      deep: true,
      immediate: true
    },
  },
  mounted() {
    console.log(this);
  },
  methods: {
    formEvent(formName, type, data) {
      // qyxxForm textEvent 服务续费
      // qyxxForm textEvent 下载核定通知书
      if (formName === 'MailingInformation' && type === 'update') {
        // values{payment: 'key2'}
        if (data.values.onLine === '1') {
          this.dataConfig.isRequirePayment = false
        }
        if (data.values.onLine === '0') {
          this.dataConfig.isRequirePayment = true
        }
      }
      if (type == 'submit') {
        const tempObj = JSON.parse(JSON.stringify(this.dataConfig.formRes))
        this.dataConfig.formRes = { ...tempObj, ...data.values }
      }
      console.log('MailingInformation formEvent===>', this, formName, type, data, this.dataConfig.formRes, this.formInfo);
    },
    btnEvent() {
      this.$refs.MailingInformation.handleSubmit()
      if (this.dataConfig.isRequirePayment === true) {
        this.$refs.MailingInformation1.handleSubmit()
      }
      setTimeout(() => {
        if (this.dataConfig.isRequirePayment === true) {
          if (this.$refs.MailingInformation.checkRes === true && this.$refs.MailingInformation1.checkRes === true) {
            // this.$message.info('需要对接接口')
            this.winConfig.type = '1'
            this.winConfig.status = 'warning' //warning success info
            this.winConfig.title = '材料寄送'
            this.winConfig.subTitle = '确认邮寄地址为您经常居所地且真实有效；邮寄相关信息为您个人真实信息且具有查询性；邮件资料寄出后中雄信息科技有限公司不以任何原因对该资料主张相应权利以及承担保管义务，请您妥善保管。'
            this.winConfig.btnLabel = '我已知晓，确认寄送'
            this.timerEvent(10)
            this.winConfig.visible = true
          }
        } else {
          if (this.$refs.MailingInformation.checkRes === true) {
            // this.$message.info('需要对接接口')
            this.winConfig.type = '1'
            this.winConfig.status = 'warning' //warning success info
            this.winConfig.title = '材料寄送'
            this.winConfig.subTitle = '确认邮寄地址为您经常居所地且真实有效；邮寄相关信息为您个人真实信息且具有查询性；邮件资料寄出后中雄信息科技有限公司不以任何原因对该资料主张相应权利以及承担保管义务，请您妥善保管。'
            this.winConfig.btnLabel = '我已知晓，确认寄送'
            this.timerEvent(10)
            this.winConfig.visible = true
          }
        }
      }, 500);


      // this.$message.info('需要对接接口')
    },
    timerEvent(num, backFun) {
      this.winConfig.timerNum = num
      this.winConfig.btnVisible = true
      clearInterval(this.winConfig.intervalObj);
      let tempnum = num
      this.winConfig.intervalObj = setInterval(() => {
        tempnum--
        this.winConfig.timerNum = tempnum
        if (tempnum <= 0) {
          this.winConfig.btnVisible = false
          clearInterval(this.winConfig.intervalObj);
          backFun && backFun()
        }
      }, 1000)
    },
    // 确认寄送事件
    qrjsEvent(btnLabel) {
      console.log('确认寄送事件==>', btnLabel, this.winConfig);

      if (this.winConfig.btnLabel === '关闭' && this.winConfig.type === '2') {
        this.winConfig.visible = false
        this.coloseEvent()
      }
      if (btnLabel == '我已知晓，确认寄送') {
        // this.$message.info('关闭窗口,需要调用接口')
        const param = {...this.dataConfig.formRes,entId:this.formInfo.entId}
        // dataList
        if(param.dataList.indexOf('营业执照（正副本）')>=0){
          param['businessLicense'] = 1
        }else{
          param['businessLicense'] = 0
        }
        if(param.dataList.indexOf('公司业务公章（公章、财务章等）')>=0){
          param['seal'] = 1
        }else{
          param['seal'] = 0
        }
        if(param.dataList.indexOf('银行相关资料')>=0){
          param['applicationForApproval'] = 1
        }else{
          param['applicationForApproval'] = 0
        }

        getDataForDB('企业端发起邮寄资料申请', param).then(res => {
          if(res.code==200){
            this.winConfig.title = ''
            this.winConfig.status = 'success'
            this.winConfig.subTitle = '请您及时关注业务进度，谢谢合作！'
            this.winConfig.btnLabel = '关闭'
            this.winConfig.type = '2'
            this.timerEvent(10, () => {
              this.winConfig.visible = false
            })
          }else {
            this.$message.warning(res.message)
          }
        })
      }
    },

  }

}
</script>

<style>
.ant-btn-gree {
  color: #fff;
  background-color: #2ba245;
  border-color: #2ba245;
}

/*  14a11c */
.ant-btn-gree:hover,
.ant-btn-gree:focus {
  color: #fff;
  background-color: #1c8621;
  border-color: #1c8621;
}
</style>
